<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';

const {title='默认标题'} = defineProps<{
  title: string;
}>()

</script>

<template>
  <div>
    <!-- 写一个navbar -->
     <div class="nav-bar">
      <div class="left">
        <slot name="left">
          <button>返回</button>
        </slot>
      </div>
      <div class="center">
        <slot name="center" :msg=title>
          <a href="#">{{ title }}</a>
        </slot>
        <slot></slot>
      </div>
      <div class="right">
        <slot name="right">
          <button>菜单</button>
        </slot>
      </div>
    </div>
  </div>
</template>

<style scoped>
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  line-height: 44px;
  padding: 0 10px;
  background-color:azure;
  color: #fff;
  box-shadow: 0 1px 1px rgba(100, 100, 100, 0.1);

}

button{
  background-color: #fff;
  border: none;
  border-radius: 10px;
  padding: 5px 10px;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  outline: none;
}

a{
  color: #333;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;

}

</style>